<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<title>选择机构</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name = "format-detection" content = "telephone=no">
	<link rel="stylesheet" href="css/mui.min.css">
	<link rel="stylesheet" href="css/grandeHealth.css">
	<style>
		.mui-table-view .name{color: #333;line-height: 30px;font-size: 16px;}
		.mui-table-view .kaoheDate{font-size: 14px;color: #666;line-height: 35px;margin-right: 10px;}
		.mui-search {width: 96%;margin: 0 2%;}
		input[type=search]{background: #fff;border: 1px solid #ccc;height: 45px;border: 0;margin-bottom: 5px;}
		.mui-search .mui-placeholder {line-height: 45px;}
		#pullrefresh{height:50px;margin-top: 65px;}
		.mui-indexed-list{overflow: hidden;}
		.mui-table-view .mui-table-view-cell .name,.mui-table-view .mui-table-view-cell .kaoheDate{float: left;}
		.mui-table-view .name{width: 20%;}
		.mui-table-view .kaoheDate{width: 80%;margin: 0;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
		
		/*暂无记录*/
		.mui-content {height: 100%;padding: 0!important;}
		.nomessage {text-align: center;font-size: 16px;color: #adb6d9;margin-top: 10rem;}
		.nomessage img {width: 120px;height: 120px;}
.mui-indexed-list {	height: 45px;margin-top:10px}
.mui-scroll-wrapper {margin-top:-45px}
	</style>
	    
	</head>
	<body>
		<!--<header>class="mui-bar mui-bar-nav" style="display: block;height: 64px;padding-top:20px">
	      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    </header>-->
		<div class="mui-indexed-list">
			<div class="mui-indexed-list-search mui-input-row mui-search">
				<input type="search" id="searchInput" value="" class="inputValue mui-input-clear mui-indexed-list-search-input" placeholder="机构名称或机构代码">
			</div>
		</div>
		<!--下拉刷新容器-->
	    <div class="mui-scroll-wrapper" id="pullrefresh">
	      <div class="mui-scroll">
	        <!-- 数据列表 -->
	        <ul class="mui-table-view">
	        	<!--<li class="mui-table-view-cell">
					<div class="mui-media-body">
						<p class="name">xh104</p>
						<span class="kaoheDate">徐汇中心医院</span> 
					</div> 
				</li>-->
	       </ul>
	      </div>
	    </div>
	    
	    <!--暂无记录-->
	    <div class="mui-content" style="display: none;">
	      <div class="nomessage">
	        <img src="images/zanwujilu.png" />
	        <p>暂无记录</p>
	      </div>
	    </div>
	    
		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/grandeHealth.js"></script>
		<!--公共js-->
		<script src="js/medicalRecord.js"></script>
		<script>
			
			var inputValue = $('#searchInput').val();
			var allUrl = XHDOC_WEBBASE + "v1/mpc/queryLoc?param=";
			var webUrl ='';
			
			/*
			 * keydown调用
			 */
			
			$('#searchInput').on('input propertychange', function() {
				
				inputValue = $(this).val();
				webUrl = allUrl + inputValue;
				//清空原有数据
				var table = document.body.querySelector('.mui-table-view');
            	table.innerHTML = '';
            	
            	pulldownRefresh();//调用
			});
			
	  
	     	/**
		       * 页面初始化
	     	*/
			mui.init({
		        pullRefresh: {
		          	container: '#pullrefresh',
		          	down: {
		          		auto: true,
            			callback: pulldownRefresh,
		          	},
	          		up: {
			            contentrefresh: '正在加载...',
			            callback: pullupRefresh,
				      	contentnomore:'没有更多数据了'//可选，请求完毕若没有更多数据时显示的提醒内容；
	          		}
		        }
	      	});
	      	
			
			/**
		       * 下拉刷新具体业务实现
	     	*/
	     	function pulldownRefresh() {
	     		
	     		setTimeout(function () {
	     			
	     			count = 1;
	     			webUrl = allUrl + inputValue;
	     			jiaohu(webUrl, { 'pageNo': count }, function (data) {
						
						var table = document.body.querySelector('.mui-table-view');
						table.innerHTML = '';
						
						//最新数据
						addContent(data, table);
						
						mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(null, "正在加载...");
						count++;
					});
					
	          	}, 1000);
	      	}
	     	
	     	
	    	/**
	     	* 上拉加载具体业务实现
	     	*/
	      	function pullupRefresh() {
	      		
	      		setTimeout(function () {
				
					webUrl = allUrl + inputValue;
					jiaohu(webUrl, { 'pageNo': count }, function (data) {
						
						var table = document.body.querySelector('.mui-table-view');
						
						//最新数据
						if (arry.parameterType == '') {
							
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(null, "没有更多数据了");
	
						} else {
	
							//最新数据
							addContent(data, table);
							count++;
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(null, "正在加载...");
						}
					});
	
				}, 1000);
	      	}
	
			
			function addContent(arry, table) {
				
				if (arry.parameterType == '') {
							
					$('.mui-content').show();

				} else {

					$('.mui-content').hide();
					
					for (var i = 0; i < arry.parameterType.length; i++) {

						var li = document.createElement('li');
						li.className = 'mui-table-view-cell';
						li.innerHTML = 
									'<div class="mui-media-body">'+
										'<p class="name">'+arry.parameterType[i].id+'</p>'+
										'<span class="kaoheDate">'+arry.parameterType[i].name+'</span>'+
									'</div>';
			            table.appendChild(li);
					}
				}
			}
			
			
			/*
			 * 选择患者机构
			 */
			mui("body").on("tap", ".mui-table-view li", function() {
				
				var Dept = $(this).find('.name').html();
				var deptName = $(this).find('.kaoheDate').html();
				window.localStorage.setItem('Dept',Dept);
				window.localStorage.setItem('deptName',deptName);
				showpage('createPersonConsul.html');
			})
	    </script>		
	</body>
</html>


